<template>
  <el-card shadow="never">
    <template #header>
      <div class="h-3 flex justify-between">
        <span>{{ title }}</span>
      </div>
    </template>
    <el-skeleton :loading="loading" animated>
      <el-row>
        <el-col v-for="(item, index) in staffData" :key="`staff-${index}`" :xl="6" :lg="6" :md="6" :sm="12" :xs="12">
          <div class="statistic-card">
            <el-statistic
:value="item.value"
              value-style="text-align: center; font-size: 24px; font-weight: bold; display: block;">
              <template #title>
                <div class="icon-container" :style="{ backgroundColor: item.color }">
                  <el-icon :size="25" style="color: #fff;">
                    <component :is="item.icon" />
                  </el-icon>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer" style="text-align: center; font-size: 14px;">
              {{ item.message }}
            </div>
          </div>
        </el-col>
      </el-row>
    </el-skeleton>
  </el-card>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

// 接收父组件传递的 props
defineProps({
  title: {
    type: String,
    required: true
  },
  staffData: {
    type: Array,
    required: true
  },
  loading: {
    type: Boolean,
    required: true
  }
})
</script>

<style scoped>
.statistic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
  transition: all 0.3s;
}

.statistic-card:hover {
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px); */
}

.icon-container {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px; /* 圆形背景 */
  margin-bottom: 8px;
  margin: 0 auto;
}

.statistic-footer {
  font-size: 14px;
  color: #666;
  }
</style>